<template>
<div class="city_map">
  <div class="top"></div>
  <div class="left_add">
    <div class="item_add" v-for='(item,index) in address' :key="index">
      <div @click="changeL(item,index)" class='yuan' :style="'background:'+(list.findIndex(item1=>item1[1].name==item.name)>-1?item.color:'')"></div>
      <div @click="changeL(item,index)" class="item_add_title" :class="list.findIndex(item1=>item1[1].name==item.name)>-1?'choose':''" :style="'background:'+item.color">{{item.name}}</div>
    </div>
  </div>
  <div id="fxmap"></div>
  <div class="footer"></div>
</div>
</template>
<script>
import {  } from "@/api/api";
import xjMap from './xMap.json'
import { option } from "./mapData.js";
var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      name: data[i].name,
      add:data[i].add,
      color:data[i].color,
      value: [data[i].lon,data[i].lat],
    })
  }
  return res;
};
var convertData1 = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      name: data[i][0].name,
      value: [data[i][0].lon,data[i][0].lat],
    })
    res.push({
      name: data[i][1].name,
      value: [data[i][1].lon,data[i][1].lat],
    })
  }
  return res;
};
// var convertData2 = function (data) {
// 	let res = []
// 	for (let i = 0; i <  data.length; i ++) {
// 		let item = data[i]
// 		//  获取 来去 地址的 经纬度
// 		let fromCoord = [item[0].lon, item[0].lat]
// 		let toCoord = [item[1].lon, item[1].lat]
// 		let toCoord1 = [item[2].lon, item[2].lat]
// 		// debugger;
// 		if (fromCoord && toCoord) {
// 			res.push({
// 				fromName: item[0].name,
// 				toName: item[1].name,
// 				toName1: item[2].name,
// 				coords: [fromCoord, toCoord,toCoord1]
// 			})
// 		}
// 	}
// 	return res
// }
var convertData2 = function (data) {
	let res = []
	for (let i = 0; i <  data.length; i ++) {
		let item = data[i]
    //  获取 来去 地址的 经纬度
    let arr=[]
    if(item.length>1&&item[1].name){
      item.forEach(item1=>{
        arr.push([item1.lon, item1.lat])
      })	
      res.push({
        name:'路线',
        color:item[1].color,
        coords: arr
      })
    }
	}
	return res
}
var myChart = null;

export default {
  data(){
    return{
      center:{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},
      address:[
        {color:'#5867DD',name:'建投聚融广场',add:'乌鲁木齐市新市区卫星路(进出口加工区南侧约200米)',lat:43.85625,lon:87.531406},
        // {color:'#36A3F7',name:'祥云中街南150米',add:'祥云中街南150米',lat:43.865337,lon:87.409584},
        {color:'#901CE6',name:'百纳威智能终端电子产业园',add:'乌鲁木齐市乌鲁木齐县万盛大街',lat:43.826407,lon:87.331753},  
        {color:'#E61C5D',name:'新疆国际陆港有限责任公司',add:'新疆维吾尔自治区乌鲁木齐市头屯河区祥云中街651号附近',lat:43.867953,lon:87.422877},
        {color:'#FFB822',name:'乌鲁木齐高铁枢纽综合开发区',add:'新疆维吾尔自治区乌鲁木齐市新市区乌鲁木齐经济技术开发区卫星路475号紫金大厦10楼1004室',lat:43.866575,lon:87.534437},
        // {color:'#00C5DC',name:'国际纺织品服装商贸中心',add:'新疆乌鲁木齐市沙依巴克区奇台路658号国际纺织品服装商贸中心',lat:43.795791,lon:87.593756},
        {color:'#34BFA3',name:'白鸟湖临港产业园',add:'白鸟湖临港产业园',lat:43.86082,lon:87.407919},
        {color:'#00C5DC',name:'纺织服装商贸中心',add:'北站四路西二巷',lat:43.872761,lon:87.480316},
      ],
      list:[
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#5867DD',name:'建投聚融广场',add:'乌鲁木齐市新市区卫星路(进出口加工区南侧约200米)',lat:43.85643,lon:87.531406}],
        // [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#36A3F7',name:'祥云中街南150米',lat:43.865337,lon:87.409584}],
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#901CE6',name:'百纳威智能终端电子产业园',add:'乌鲁木齐市乌鲁木齐县万盛大街',lat:43.826407,lon:87.331653},], 
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#E61C5D',name:'新疆国际陆港有限责任公司',add:'新疆维吾尔自治区乌鲁木齐市头屯河区祥云中街651号附近',lat:43.867953,lon:87.422877},],
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#FFB822',name:'乌鲁木齐高铁枢纽综合开发区',add:'新疆维吾尔自治区乌鲁木齐市新市区乌鲁木齐经济技术开发区卫星路475号紫金大厦10楼1004室',lat:43.866575,lon:87.534437}],
        // [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#00C5DC',name:'国际纺织品服装商贸中心',add:'新疆乌鲁木齐市沙依巴克区奇台路658号国际纺织品服装商贸中心',lat:43.795791,lon:87.593756},],
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#34BFA3',name:'白鸟湖临港产业园',add:'白鸟湖临港产业园',lat:43.86082,lon:87.407919}],
        [{name:'维泰大厦',add:'经济技术开发区维泰南路1号',lat:43.842153,lon:87.516096},{color:'#00C5DC',name:'纺织服装商贸中心',add:'北站四路西二巷',lat:43.872761,lon:87.480316},],
        [{lon:87.34097568237308,lat:44.005872344966236},{name:'qwe',lon:87.42674643432621,lat:43.93883117620762},{lon:87.44974643432621,lat:43.9123117620762},{lon:87.44974643432621,lat:43.9023117620762},{lon:87.48974643432621,lat:43.8823117620762}],
      ]
    }
  },
  created(){
    // this.list[0].push(this.list[4][1])
    // this.list[0].push(this.list[3][1])
    // this.list[0].push(this.list[1][1])
    // this.list[0].push(this.list[6][1])
    // this.list[0].push(this.list[2][1])
    // this.list[0].push(this.list[5][1])
    // this.list[0].push(this.list[0][0])
    // console.log(this.list)
  },
  mounted(){
    myChart = this.$echarts.init(document.getElementById('fxmap'))
    window.onresize = myChart.resize
    window.addEventListener("resize", myChart.resize)
    let city_code = 'xinjiang'
    this.$echarts.registerMap(city_code, xjMap)
    option.geo.map = city_code;
    option.series[0].map = city_code;

    let arr=JSON.parse(JSON.stringify(this.address))
    arr.push({...this.center})
    option.series[0].data=convertData(arr)
    option.series[1].data=convertData2(this.list)
    option.series[2].data=convertData2(this.list)

    option.series[1].lineStyle.normal.color = function (params) {
      if (params.data.color) {
        return params.data.color
      }else{
        return "#f93";
      }
    }

    option.series[2].lineStyle.normal.color = function (params) {
      if (params.data.color) {
        return params.data.color
      }else{
        return "#F4DE90";
      }
    }

    option.series[0].itemStyle.normal.color = function (params) {
      console.log(params)
      if (params.name == '维泰大厦') {
        return "#ec2c26";
      }else{
        return params.data.color
      }
    }

    myChart.setOption(option)
  },
  beforeDestroy(){
    if(myChart){
      myChart.clear()
    }
  },
  methods:{
    changeL(item,index){
      if(this.list[index][1].name){
        this.list[index][1]={name:''}
      }else{
        this.list[index][1]=item
      }
      this.list.push(index)
      this.list.pop()
      option.series[1].data=convertData2(this.list)
      option.series[2].data=convertData2(this.list)
      option.geo.zoom = myChart.getOption().geo[0].zoom
      option.geo.center = myChart.getOption().geo[0].center
      
      myChart.setOption(option,true)
    }
  }
}
</script>
<style lang="scss" scoped>
.city_map{
  width: 100%;
  height: 100%;
  // background: #AFC6EB;
  background: url(~@a/img/map2.jpg) no-repeat;
  background-position: center;
  background-size: 800px 1000px;
  position: relative;
  .left_add{
    position: absolute;
    left: 20px;
    top: 180px;
    z-index: 1;
    font-size: 22px;
    font-weight: 600;
    color: #ccc;
    .item_add{
      display: flex;
      align-items: center;
      // &:hover .yuan{
      //   background:#fff;
      // }
      .yuan{
        cursor: pointer;
        height: 26px;
        width:26px;
        border-radius: 50%;
        background:#bbb;
        margin-right: 10px;
      }
      .item_add_title{
        cursor: pointer;
        width:fit-content;
        width:-webkit-fit-content;
        width:-moz-fit-content;
        padding:2px 5px;
        margin: 10px 0;
        background:#5867DD;
        // &:hover{
        //   color:#1dd764;
        // }
      }
      .choose{
        color: #fff !important;
      }
      .choose_yuan{
        background:#5867DD !important;
      }
    }
  }
}
#fxmap{
  width: 100%;
  height: 100%;
}
.top{
  position: absolute;
  top: 0;
  height: 160px;
  width: 100%;
  background: url(~@a/img/banner.png) no-repeat;
  background-position:center;
  background-size: 1920px 160px;
  z-index: 100;
}
.footer{
  position: absolute;
  bottom: 0;
  height: 160px;
  width: 100%;
  background: #d73c1d;
  z-index: 100;
}
</style>